<template>
  <ScreenLayoutWithMenu title="数据可视化大屏 - 成本分析">
    <!-- KPI统计数据行 -->
    <div class="kpi-section">
      <KPICard label="销售额" value="16,757,725" />
      <KPICard label="产品成本" value="3,693,997" />
      <KPICard label="营销成本" value="2,236,448" />
      <KPICard label="毛利率" value="64.61%" green />
      <KPICard label="完成率" value="49.95%" />
    </div>

    <!-- 图表区域 -->
    <div class="screen-grid grid-cost">
      <ChartCard title="月度成本利润趋势分析" grid-area="a">
        <ECharts :option="monthlyCostProfitOption" />
      </ChartCard>
      <ChartCard title="成本漏斗分析" grid-area="b">
        <ECharts :option="costFunnelOption" />
      </ChartCard>
      <ChartCard title="毛利率达成分析" grid-area="c">
        <ECharts :option="profitMarginOption" />
      </ChartCard>
    </div>
  </ScreenLayoutWithMenu>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import ScreenLayoutWithMenu from '../components/ScreenLayoutWithMenu.vue'
import KPICard from '../components/KPICard.vue'
import ChartCard from '../components/ChartCard.vue'
import ECharts from '../components/ECharts.vue'
import * as echarts from 'echarts'
import './Screen.css'

const costFunnelOption = ref({})
const profitMarginOption = ref({})
const monthlyCostProfitOption = ref({})

onMounted(() => {
  // 成本漏斗分析
  costFunnelOption.value = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c}百万 ({d}%)'
    },
    legend: {
      orient: 'vertical',
      right: 10,
      top: 'center',
      textStyle: { color: '#fff' },
      data: ['销售额', '产品成本', '营销成本', '毛利润']
    },
    series: [
      {
        name: '成本分析',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#0a0e27',
          borderWidth: 2
        },
        label: {
          show: true,
          formatter: '{b}\n{c}百万\n({d}%)',
          color: '#fff'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 16,
            fontWeight: 'bold'
          }
        },
        data: [
          { value: 17, name: '销售额', itemStyle: { color: '#1890ff' } },
          { value: 10.83, name: '产品成本', itemStyle: { color: '#001529' } },
          { value: 4, name: '营销成本', itemStyle: { color: '#1f4788' } },
          { value: 2, name: '毛利润', itemStyle: { color: '#5dade2' } }
        ]
      }
    ]
  }

  // 毛利率达成分析
  profitMarginOption.value = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c}%'
    },
    series: [
      {
        type: 'treemap',
        data: [
          {
            name: 'Antibiotics',
            value: 71.66,
            itemStyle: {
              color: '#52c41a'
            },
            label: {
              show: true,
              formatter: '{b}\n{c}%',
              color: '#fff',
              fontSize: 18,
              fontWeight: 'bold'
            }
          },
          {
            name: 'Painkillers',
            value: 65.06,
            itemStyle: {
              color: '#36cfc9'
            },
            label: {
              show: true,
              formatter: '{b}\n{c}%',
              color: '#fff',
              fontSize: 18,
              fontWeight: 'bold'
            }
          },
          {
            name: 'Antiviral',
            value: 54.90,
            itemStyle: {
              color: '#1890ff'
            },
            label: {
              show: true,
              formatter: '{b}\n{c}%',
              color: '#fff',
              fontSize: 18,
              fontWeight: 'bold'
            }
          }
        ]
      }
    ]
  }

  // 月度成本利润趋势分析
  monthlyCostProfitOption.value = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'cross' }
    },
    legend: {
      data: ['产品成本', '毛利润', '毛利率'],
      textStyle: { color: '#fff' },
      top: 10
    },
    grid: {
      left: '10%',
      right: '10%',
      top: '20%',
      bottom: '15%'
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      axisLine: { lineStyle: { color: '#1890ff' } },
      axisLabel: { color: '#fff' }
    },
    yAxis: [
      {
        type: 'value',
        name: '金额',
        min: 0,
        max: 2000000,
        axisLine: { lineStyle: { color: '#1890ff' } },
        axisLabel: { 
          color: '#fff',
          formatter: function(value) {
            if (value >= 1000000) {
              return (value / 1000000).toFixed(1) + 'M'
            }
            return (value / 1000).toFixed(0) + 'K'
          }
        },
        splitLine: { lineStyle: { color: 'rgba(24, 144, 255, 0.1)' } }
      },
      {
        type: 'value',
        name: '毛利率',
        min: 60,
        max: 70,
        axisLine: { lineStyle: { color: '#1890ff' } },
        axisLabel: { color: '#fff', formatter: '{value}%' },
        splitLine: { show: false }
      }
    ],
    series: [
      {
        name: '产品成本',
        type: 'bar',
        data: [300000, 320000, 310000, 330000, 360000, 340000, 350000, 370000, 340000, 360000, 330000, 369399],
        itemStyle: {
          color: '#52c41a'
        }
      },
      {
        name: '毛利润',
        type: 'bar',
        data: [550000, 480000, 440000, 700000, 530000, 770000, 920000, 630000, 840000, 730000, 610000, 1083300],
        itemStyle: {
          color: '#36cfc9'
        }
      },
      {
        name: '毛利率',
        type: 'line',
        yAxisIndex: 1,
        data: [64.54, 60.10, 58.68, 68.03, 59.25, 69.58, 71.59, 62.93, 71.12, 66.87, 64.40, 61.72],
        lineStyle: { color: '#ff9800', width: 2 },
        itemStyle: { color: '#ff9800' },
        label: {
          show: true,
          position: 'top',
          color: '#ff9800',
          formatter: '{c}%'
        }
      }
    ]
  }
})
</script>

